<template>
  <div class="homeOut">
   <div class="header">
        <el-card shadow="never" class="box-card">   
            <div class="head_Con">
                <div class="user_avatar">
                        <el-image style="width: 120px; height: 120px; border-radius: 50%;"
                        :src="useUserStore().avatar || defAva" fit="cover" />
                </div>
                <div>
                    <h3>你好{{ useUserStore().userName }}老师,欢迎使用cgclass后台管理系统</h3>
                    <p>
                        数字视觉云课堂/CGclass实训教学平台，该平台是专为数字媒体专业提供实训教学过程管理而设计的平台。快速构建课堂活动、布置作品作业、学生作品批阅、统计分析可视化等功能，平台私有化部署保障教学资源的安全性，为师生提供智能、便捷、高效的教学实训环境，助力智慧高校数字化转型。
                    </p>
                </div>
            </div>
        </el-card>
    </div>

  <div class='teach'>
        <div class='left'>
          <!-- 头部数据 -->
          <div class='census'>

            <div class='item'>
              <div class='pic'>
                <i class="iconfont icon-certified-supplier-fill"></i>
              </div>
              <div class='text'>
                <div class='small'>已培训人数</div>
                <div class='big'>
                  <b v-if="headObj.part_trained">{{ headObj.part_trained
                    }}</b>
                    
                    <b v-else>0</b>人
                </div>
              </div>
            </div>

            <div class='item'>
              <div class='pic'>
                <i class="iconfont icon-manage-order-fill"></i>
              </div>
              <div class='text'>
                <div class='small'>累计批阅作业量</div>
                <div class='big'>
                 
                  <b v-if="graded_count">{{ graded_count}}</b><b v-else>0</b>份
                  
           
                </div>
              </div>
            </div>
          

            <div class='item'>
              <div class='pic'>
                <i class="iconfont icon-order-fill"></i>
              </div>
              <div class='text'>
                <div class='small'>待批阅作业</div>
                <div class='big'>
                  <b v-if="ungraded_count">{{ ungraded_count
 }}</b><b v-else>0</b>份
                </div>
              </div>
            </div>


            <div class='item'>
              <div class='pic'>
                <i class="iconfont icon-contacts-fill"></i>
              </div>
              <div class='text'>
                <div class='small'>已管理班级</div>
                <div class='big'>
                  <b v-if="headObj.part_manage_cla">{{ headObj.part_manage_cla
                    }}</b><b v-else>0</b>个
                </div>
              </div>
            </div>

            <div class='item'>
              <div class='pic'>
                <i class="iconfont icon-folder-fill"></i>
              </div>
              <div class='text'>
                <div class='small'>已创建班课</div>
                <div class='big'>
                  <b v-if=" headObj.part_bk_count">{{ headObj.part_bk_count
                    }}</b><b v-else>0</b>门
                </div>
              </div>
            </div>


          </div>

          <div class='rencent-class'>
            <div class='module-title'>
              <span>最近班课</span>
              <router-link :to="'/classlesson'" class='link'>
                <span class='more'>更多班课 <b> ></b></span>
              </router-link>
            </div>
            <div class='class-list'>
              <div v-if="rencentClassArr.length" class='item' v-for='(item, index) in rencentClassArr' :key='item.id'>
                <div @click="goSyllabus(item)" class='class-info'>
                  <div  class='info-top'>
                    <div class='pic'><img :src='item.url'
                        alt='' />
                    </div>
                    <div class='text'>
                      <div class="arch-name">
                        <i class="iconfont icon-integral-fill"></i>
                        <span>
                          {{item.cla_name}}
                        </span>
                      </div>
                      <div class='title'>{{item.name}}</div>
                      <!-- <div class='time-techer'>
                        <div class='class-name'>创新谷基地</div>
                        <p>100更新</p>
                      </div> -->
                    </div>
                  </div>

                  <div class='info-bottom'>
                    <div class='info-item'>
                      <div class='icon'>
                        <svg class='coloricon' aria-hidden='true'>
                          <use xlink:href='#icon-women'></use>
                        </svg>
                      </div>
                      <div class='text'>
                        <div class='small'>班课人数</div>
                        <div class='big'>
                          <b>{{item?.detail?.bk_rs ?? 0}}</b>人
                        </div>
                      </div>
                    </div>
                    <div class='info-item'>
                      <div class='icon'>
                        <svg class='coloricon' aria-hidden='true'>
                          <use xlink:href='#icon-wenjian'></use>
                        </svg>
                      </div>
                      <div class='text'>
                        <div class='small'>章数</div>
                        <div class='big'>
                          <b>{{item?.detail?.bk_zl || 0}}</b>章
                        </div>
                      </div>
                    </div>
                    <div class='info-item'>
                      <div class='icon'>
                        <svg class='coloricon' aria-hidden='true'>
                          <use xlink:href='#icon-ziliao'></use>
                        </svg>
                      </div>
                      <div class='text'>
                        <div class='small'>节数</div>
                        <div class='big'>
                          <b>{{item?.detail?.bk_zy ?? 0}}</b>节
                        </div>
                      </div>
                    </div>
                    <div class='info-item'>
                      <div class='icon'>
                        <svg class='coloricon' aria-hidden='true'>
                          <use xlink:href='#icon-zixun'></use>
                        </svg>
                      </div>
                      <div class='text'>
                        <div class='small'>课程资料</div>
                        <div class='big'>
                          <b>{{item?.detail?.bk_zj ?? 0}}</b>份
                        </div>
                      </div>
                    </div>
                    <div class='info-item'>
                      <div class='icon'>
                        <svg class='coloricon' aria-hidden='true'>
                          <use xlink:href='#icon-ziliaowenjian'></use>
                        </svg>
                      </div>
                      <div class='text'>
                        <div class='small'>作业期数</div>
                        <div class='big'>
                          <b>{{item?.detail?.bk_js ?? 0}}</b>次
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 左侧的chart -->
                <div class='works-info' ref='work' :id="'work' + index">
                </div>
              </div>

              <div v-else>
                <el-empty :image-size="200"  description='暂无班课信息' />
              </div>
            </div>
          </div>
        </div>
 
        <div class='right'>
          <el-card shadow="never" class="box-card">
            <template #header>
              <div class="classTit">
                <h3>优秀班课排名</h3>
              </div>
            </template>
            <div v-if="classArr.length" @click="goSyllabus(item)" v-for="(item, index) in classArr" :key="item.id" class="item">
              <div class="sort">0{{ index + 1 }}</div>
              <el-image class="img" style="width: 60px; height: 40px" :src='item.url' fit="cover" />
              <div class="txt">
                <p>{{ item.name
                  }}</p>
                <span>{{ item.nick_name }}老师</span>
              </div>
            </div>
            <div v-else>
              <el-empty description='暂无优秀班课'/>
            </div>
          </el-card>
          <div style="margin-bottom: 30px;"></div>

        </div>
  </div>
</div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { echarts } from './charts';
import { excellent_bk } from '@/api/banke/class';
// import * as echarts from 'echarts'
import { useUserStore } from "@/store/modules/user"
import { giveEllipsisStr1 } from '@/utils/common';
import { useRouter } from 'vue-router';
import defAva from '@/assets/images/user-default.jpg';
import { headerList, centerList, rightList } from "@/api/teach/index"
import { counterStore } from "@/store/modules/counter"
const store = counterStore()
const { proxy } = getCurrentInstance();
// 班课列表
const classArr = ref([])
const headObj = ref({}); // 首页-头部数据
const rightListArr = ref([]); // 首页-优秀班课数据
const  graded_count=ref()
const  ungraded_count=ref()
const rencentClassArr = ref([
 
]) //首页-最近班课数据
const router = useRouter();
const navClassDetail = ({ id }) => {
  router.push({
    path: '/teach/syllabus',
    query: {
      bkid: id,
    },
  });
};





//柱状图参数
const echartsOption = {
  title: {
    text: '作业量 / 批阅数',
    x: 'center',
    y: 'top',
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['作业量', '批阅数'],
    x: 'center',
    y: 'bottom',
  },
  toolbox: {
    show: false,
  },
  grid: {
    height: '50%',
    top:"30%"
  },

  calculable: false,
  xAxis: [
    {
      type: 'category',

    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '作业量',
      type: 'bar',
      barMaxWidth: 25,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' },
        ],
      },
    },
    {
      name: '批阅数',
      type: 'bar',
      barMaxWidth: 25,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' },
        ],
      },
    },
  ],
};
//生成图表
const chartinit = (idname, option) => {
  var myChart = echarts.init(idname);
  var myoption = option;
  myoption && myChart.setOption(myoption);
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    myChart.resize();
  };
};

//处理最近班课柱状图
const rencentClassInit = () => {
console.log(rencentClassArr.value);


  rencentClassArr.value.forEach((item, index) => {

    item.bkOprateinfo=item.bkOprateinfo.slice(0,5)
    //处理作业名称人长度
    item.bkOprateinfo.forEach(item => {
      item.name = giveEllipsisStr1(item.name, 5);

    });
    
    let classOption = {
      ...echartsOption,
      dataset: {
        source: item.bkOprateinfo,
      },
    };
    //先挂在dom体再初始化echart
    proxy.$nextTick(() => {
      chartinit(proxy.$refs.work[index], classOption);
    })

  })

};


// 首页--头部数据
const getHeaderList = () => {
  headerList().then(res => {
    console.log(res);
    graded_count.value=res.part_review_info.graded_count
    ungraded_count.value=res.part_review_info.ungraded_count
    headObj.value = res
  })
}

//首页 获取中间数据

const getCenterList=()=>{
  centerList().then(res=>{
    

    // 整合函数
      function integrateArrays(arr1, arr2) {
        // 遍历arr1
        arr1.forEach(item => {
          item.bkOprateinfo = arr2.filter(bkItem => String(item.id) === bkItem.bk_id);
        });
        return arr1;
      }

     rencentClassArr.value= integrateArrays(res.center,res.center_right)

   console.log(rencentClassArr.value);
   rencentClassInit();
   
    
  })

}
// 获取所有班课列表数据
const getClassList = () => {
  excellent_bk().then(res => {
    console.log(res);
    if (res) {
      classArr.value = res
    } else {
      classArr.value = []
    }

  })
}
// 跳转到 班课详情
const goSyllabus = (item) => {
 console.log(item);
  store.bkItem = item
  store.bkItem.cover_url=item.url 
  store.excellentClass=true
  router.push({ path: '/designclass', query: { activeNum: 1 } })
};
// 页面加载执行柱状图的处理函数
onMounted(() => {
  //最近班课柱状图
  getHeaderList()
  getClassList()
  getCenterList()
  
})






</script>

<style lang='scss' scoped>
@use '@/assets/styles/vars.module' as *;
@use "@/assets/styles/custom" as *;
.homeOut{
    overflow-x: auto;
}

.header {
    margin: 20px 0;
    width: 100%;
    min-width: 1430px;


    h3 {
        margin: 30px 0 15px 0;
    }

    p {
        color: #999;
        font-size: 14px;

    }

    .head_Con{
        display: flex;
        justify-content: space-between;
        .user_avatar{
            width: 120px;
            margin-right: 15px;
        }
    }
}

.teach {
  min-width: 1200px;
 display: flex;

  .left {
    min-width: 1100px;
   width: 75%;
    height: 100%;
    border-right: 20px solid #fff;
    box-sizing: border-box;
    margin-right: 30px;
    .census {

      display: flex;
      justify-content: space-between;
      align-items: center;


      .item {
        display: flex;
        align-items: center;
        width: calc(20% - 10px);
        background: #f2f6fa;
        padding-left: 10px;
        border-bottom-right-radius: 30px;
        border: 1px solid transparent;
        transition: 0.3s;
        cursor: pointer;

        .pic {
          padding-right: 10px;

          i {
            font-size: 50px;
            color: #4E88F3;
          }
        }

        .text {
          .small {
            font-size: 13px;
            color: #9499a0;
          }

          .big {
            font-size: 15px;
            color: #4395ff;

            b {
              font-size: 25px;
            }
          }
        }
      }

      .item:hover {
        border-color: #82b5f6;
        box-shadow: 0 10px 20px rgba(67, 149, 255, 0.2);
      }
    }

    .rencent-class {
      padding: 30px 20px;

      .module-title {
        font-size: 24px;
        color: #2f2f2f;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .more {
          cursor: pointer;
          color: #a6a6a6;
          font-size: 16px;

          b {
            font-family: '宋体';
          }
        }
      }

      .class-list {
        .item {
          display: flex;
          width: 100%;
          justify-content: space-between;
          padding: 30px 0 40px;
          border-bottom: 4px solid #f5f7fa;
        }

        .item:last-child {
          border-bottom: 0;
          margin-top: 20px;
        }

        .class-info {
        
          width: 45%;
          padding-right: 10px;

          .info-top {
            display: flex;
            padding: 5px;
            border-radius: 3px;
            transition: 0.3s;

            .pic {
              width: 220px;
              height: 124px;
              border-radius: 5px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .text {
              position: relative;
              width: calc(100% - 220px);
              padding-left: 18px;

              .arch-name {
                margin-bottom: 1px;
                color: #888;
                font-size: 16px;

                >i {
                  margin-right: 4px;
                }
              }

              .title {
                font-size: 16px;
                color: #333;
                font-weight: 500;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .class-name {
                width: max-content;
                font-size: 12px;
                color: #4395ff;
                height: 20px;
                padding: 0 8px;
                text-align: center;
                background: #e7f1ff;
                line-height: 20px;
                border-radius: 3px;
                margin-top: 6px;
              }

              .time-techer {
                width: calc(100% - 22px);
                position: absolute;
                bottom: 0;
                font-size: 14px;
                color: #aaaaaa;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
            }

            &:hover {
              background: #efefef;
            }
          }

          .info-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
          }

          .info-item {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            .icon {
              .coloricon {
                width: 1em;
                height: 1em;
                font-size: 22px;
              }
            }

            .text {
              .small {
                font-size: 14px;
                color: #acacac;
                margin: 10px 0 6px;
              }

              .big {
                font-size: 12px;
                color: #4395ff;

                b {
                  font-size: 24px;
                }
              }
            }
          }
        }

        .works-info {
          width: 55%;
         
        }
      }
    }
  }

  .right {
    min-width: 300px;
     width:  25%;
    .classTit {
      h3 {
        line-height: 1.7em;
      }
    }

    .item {
      margin: 10px 0 30px 0;
      display: flex;
      align-items: center;
      cursor: pointer;

      .sort {
        color: #666;
      }

      .img {
        margin: 0 15px;
      }

      .txt {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2px 0;

        height: 40px;

        p {
          font-size: 14px;
          line-height: 1em;
        }

        span {
          display: block;
          color: #999;
          font-size: 12px;
        }

      }

    }

    .infoTit {
      display: flex;
      justify-content: space-between;
    }



  }
}
</style>
